<script lang="ts">
	import { Any } from '$lib/api/proto/google/protobuf/any';
	import type { RoadmapInfo } from '$lib/api/proto/roadmap_api';
	import type { NodeInfo } from '$lib/api/proto/roadmap_data_api';
	import { RelateRoadmapData } from '$lib/api/proto/roadmap_data_type_api';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import { roadmapStore } from '../store.svelte';

	interface Props {
		node?: NodeInfo;
	}

	const props: Props = $props();

	let relateRoadmapId = $state(null as string | null);
	let roadmapInfoList = $state([] as RoadmapInfo[]);
	let hasChange = $state(false);

	if (props.node != undefined && props.node.content != undefined) {
		const nodeContent = Any.unpack(props.node.content, RelateRoadmapData);
		relateRoadmapId = nodeContent.roadmapId;
	}

	async function loadRoadmapInfoList() {
		if (userStore.userSession == null) {
			return;
		}
		const res = await callApi(
			appStore.roadmapApiClient.listMyOwn({
				sessionId: userStore.userSession
			}).response
		);
		roadmapInfoList = res.roadmapList.filter((item) => item.roadmapId != roadmapStore.roadmapId);
	}

	loadRoadmapInfoList();

	function closeModal() {
		roadmapStore.targetNodeType = null;
		roadmapStore.targetDropPosition = null;
		roadmapStore.editNodeType = null;
		roadmapStore.editNode = null;
	}

	async function createNode() {
		if (
			roadmapStore.targetDropPosition == null ||
			userStore.userSession == null
		) {
			return;
		}

		const relateRoadmap = roadmapInfoList.find((item) => item.roadmapId == relateRoadmapId);
		if (relateRoadmap == undefined) {
			return;
		}

		const res = await callApi(
			appStore.roadmapDataApiClient.addNode({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				x: roadmapStore.targetDropPosition.x,
				y: roadmapStore.targetDropPosition.y,
				w: 300,
				h: 200,
				content: Any.pack(
					{
						roadmapId: relateRoadmap.roadmapId,
						roadmapName: relateRoadmap.basicInfo?.name ?? ''
					},
					RelateRoadmapData
				)
			}).response
		);
		roadmapStore.onUpdateNode(res.nodeId);
		appStore.addToastMessage({
			level: 'success',
			content: '创建相关路线图节点成功',
			keepTime: 2000
		});
		closeModal();
	}

	async function updateNode() {
		if (props.node == null || userStore.userSession == null) {
			return;
		}

		const relateRoadmap = roadmapInfoList.find((item) => item.roadmapId == relateRoadmapId);
		if (relateRoadmap == undefined) {
			return;
		}

		await callApi(
			appStore.roadmapDataApiClient.updateNodeData({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				nodeId: props.node.nodeId,
				content: Any.pack(
					{
						roadmapId: relateRoadmap.roadmapId,
						roadmapName: relateRoadmap.basicInfo?.name ?? ''
					},
					RelateRoadmapData
				)
			}).response
		);
		roadmapStore.onUpdateNode(props.node.nodeId);
		appStore.addToastMessage({
			level: 'success',
			content: '修改相关路线图节点成功',
			keepTime: 2000
		});
		closeModal();
	}
</script>

<dialog class="modal modal-open">
	<div class="modal-box">
		<button
			class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
			onclick={() => closeModal()}>✕</button
		>
		<h3 class="text-lg font-bold">
			{props.node == undefined ? '创建相关路线图节点' : '修改相关路线图节点'}
		</h3>
		<div class="flex flex-wrap gap-4 p-4 max-h-[60vh] overflow-y-auto">
			{#each roadmapInfoList as roadmapInfo}
				<label class="label">
					<input
						type="radio"
						name="relateRoadmapId"
						checked={roadmapInfo.roadmapId == relateRoadmapId}
						class="radio"
						onchange={(e) => {
							if (e.currentTarget.checked) {
								relateRoadmapId = roadmapInfo.roadmapId;
								hasChange = true;
							}
						}}
					/>
					{roadmapInfo.basicInfo?.name}
				</label>
			{/each}
		</div>
		<div class="modal-action">
			<button class="btn" onclick={() => closeModal()}>取消</button>
			<button
				class="btn btn-primary"
				disabled={!hasChange}
				onclick={() => {
					if (props.node == undefined) {
						createNode();
					} else {
						updateNode();
					}
				}}>{props.node == undefined ? '创建' : '修改'}</button
			>
		</div>
	</div>
	<div class="modal-backdrop">
		<button onclick={() => closeModal()}>close</button>
	</div>
</dialog>
